<template>
    <div class="mbox">
        <div class="bj">
            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount-index-bj.png?v=2" alt="" />
        </div>
        <div class="main">
            <div class="index-title-bj">
                <img src="~/assets/images/openaccount/index-title-img1.png?v=5" class="img1" alt="" />
                <!-- <img
                    src="~/assets/images/openaccount/index-title-img2.png"
                    class="img2"
                    alt=""
                /> -->
                <!-- <div>当前开放城市：合肥</div> -->
            </div>

            <div class="caozuolist">
                <div class="list-title">
                    <img src="~/assets/images/openaccount/index-title-icon.png" alt="" />
                    <div class="text1">银行列表</div>
                    <el-popover placement="bottom" width="244" trigger="click">
                        <el-cascader v-model="address" ref="citySelect" class="cate-tab-select" placeholder="请选择银行地区"
                            :options="city_region" :props="{
                                value: 'name',
                                label: 'name',
                                children: 'cities',
                            }" filterable :clearable="true" @change="cityChange"></el-cascader>
                        <div slot="reference" class="cateTab-type-item">
                            {{ selectAddress }}
                            <i class="el-icon-arrow-down"></i>
                        </div>
                    </el-popover>

                    <el-select v-model="bank_type_id" placeholder="银行类型" @change="changeBankType">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>

                <div v-if="userInfo && userInfo.is_bank == 1" class="button" @click="time_list">
                    时间选择
                </div>
                <div v-else class="button" @click="goForm()">快速开户</div>
            </div>
            <div class="fixd-yuyue button" @click="goMyOpen">
                <img src="~/assets/images/openaccount/wdyy.png" class="ns" alt="" />
                <img src="~/assets/images/openaccount/wdyy-s.png" class="s" alt="" />
                我的预约
            </div>

            <div v-if="showw_activity_info" class="fixd-yuyue2" @click="go_showw_activity">
                <img :src="showw_activity_info.pic" class="img" alt="" />
                <div>
                    {{ showw_activity_info.all_count % 5
                    }}<span class="s1">/</span><span class="s2">5</span>
                </div>
            </div>

            <div class="account-list">
                <div v-for="(item, index) in bankList" :key="index" class="account-item">
                    <div class="actount-name">
                        <img :src="item.pic" class="log" alt="" />
                        {{ item.bank_name }}
                    </div>
                    <div v-if="item.feature" class="feature">
                        <div v-for="item in item.feature.split('，')" :key="item" class="feature-item">
                            {{ item }}
                        </div>
                    </div>
                    <div class="actount-info text-style">
                        <div class="left">
                            <span>联系人：</span>{{ item.name }}
                        </div>
                        <!-- <div class="left">
                            <span>联系电话：</span>{{ item.tel }}
                        </div> -->
                    </div>
                    <div class="text-style ellipsis">
                        <span>联系地址：</span>{{ item.address }}
                    </div>
                    <div class="text-style">
                        <span>可约时间：</span>
                        <!-- <span style="font-size: 16px">{{ item.times }}</span> -->
                        <span style="font-size: 16px">工作日8：30--17：00</span>
                    </div>
                    <div class="text-style rate">
                        <span>用户评分：</span>
                        <el-rate v-model="item.star" disabled text-color="#ff9900">
                        </el-rate>
                    </div>
                    <div v-if="item.evaluate_num != 0" class="text-style blue"
                        @click="evaluatePage = 1; lookEvaluate(item)">
                        共{{ item.evaluate_num }}人评价>
                    </div>
                    <!-- <div
                        v-if="item.bank_withdraw_isshow == 1"
                        class="text-style"
                        style="color: #f56c6c"
                    >
                        <span style="color: #555555">机构开户佣金：</span
                        >{{ item.basic_withdraw }}
                        <span style="color: #555555; padding-left: 10px"
                            >个人开户佣金：</span
                        >{{ item.person_basic_withdraw }}
                    </div> -->
                    <div v-if="!userInfo || userInfo.is_bank == 0" class="button"
                        @click="goForm('?bank_id=' + item.id)">
                        去开户
                    </div>
                </div>
            </div>

            <!-- <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="allcount"
                    :page-size="6"
                    :current-page="page"
                    @current-change="changePage"
                >
                </el-pagination>
            </div> -->

            <el-dialog title="提示" :visible.sync="dialogVisible" width="478px">
                <div class="select-time">
                    <div class="st-title">选择时间</div>

                    <div style="margin-top: 20px">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="(item, index) in timeList" :key="index" :label="item.id + ''" border
                                size="medium">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="buttons">
                        <div class="button b1" @click="edit_time">确定</div>
                        <div class="button b2" @click="dialogVisible = false">
                            取消
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>

        <el-dialog title="综合评价" :visible.sync="evaluateShow" custom-class="miniPadding" center width="542px">
            <div class="evaluate-dialog">
                <div v-if="bankSelectInfo" class="name-star">
                    <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount/look_evaluat_bj.png"
                        class="bj" alt="" />
                    <span class="star">
                        {{ bankSelectInfo.star }}
                        <span> 分 </span>
                    </span>
                    <span class="name"> {{ bankSelectInfo.bank_name }} </span>
                </div>
                <div class="list-name">
                    评论（{{
                        bankSelectInfo && bankSelectInfo.evaluate_num
                    }}条）
                </div>
                <div v-if="evaluateCount > 0" class="evaluateList">
                    <div v-for="(item, index) in evaluateList" :key="index" class="evaluateItem">
                        <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/no_user_avatar.png" class="avatar"
                            alt="" />
                        <div class="right">
                            <div class="nameAndStar">
                                {{ item.user_nickname }}
                                <el-rate v-model="item.bank_star" disabled text-color="#ff9900">
                                </el-rate>
                            </div>
                            <div class="text" v-html="item.bank_content"></div>
                            <div class="time">{{ item.createtime }}</div>
                        </div>
                    </div>
                    <div v-if="evaluateCount > 10" class="pagination" style="padding-top: 10px">
                        <el-pagination background small layout="prev, pager, next" :total="evaluateCount"
                            :page-size="10" :current-page="evaluatePage" @current-change="changeEvaluatePage">
                        </el-pagination>
                    </div>
                </div>
                <div v-if="evaluateCount == 0">
                    <el-empty description="暂无评价"></el-empty>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    bank_list,
    time_list,
    edit_time,
    bank_type,
    showw_activity,
    get_city_list,
    get_evaluate_list,
} from "@/assets/api/openAccount.js";
import { goTopSmooth } from "@/assets/utils/utils.js";
import { mapState, mapActions } from "vuex";
// import region from "@/assets/json/region-just-city.json";

import { getanalysedata2 } from "@/assets/api/indexApi.js";

export default {
    async asyncData({ params, query }) {
        let data = {};
        return data;
    },
    head() {
        return {
            title: "小竹开户-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            bankList: [],
            page: 1,
            allcount: 0,

            dialogVisible: false,

            checkList: [],
            timeList: [],

            address: ["安徽省", "合肥市", "包河区"],
            // region: region,
            city_region: [],
            selectAddress: "安徽省合肥市包河区",

            options: [],
            bank_type_id: "",

            showw_activity_info: null,

            evaluateShow: false,
            bankSelectInfo: null,
            evaluateList: [],
            evaluateCount: 0,
            evaluatePage: 1,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() { },
    mounted() {
        this.bank_type();
        this.bank_list();
        this.get_city_list();

        this.getUserInfo2().then((user) => {
            if (user) {
                this.showw_activity();
            }
        });
        getanalysedata2({
            m_id: 15,
            type: 1,
            describe: "小竹开户",
            code: "PU1",
        });
    },
    watch: {},
    methods: {
        ...mapActions("common", ["getUserInfo", "getUserInfo2"]),

        // 获取城市列表
        async get_city_list() {
            const res = await get_city_list({});
            if (res.code == 1) {
                this.city_region = res.data;
            }
        },

        async bank_type() {
            const res = await bank_type({});
            if (res.code == 1) {
                this.options = res.data;
            }
        },

        async showw_activity() {
            const res = await showw_activity({});
            if (res.code == 1) {
                this.showw_activity_info = res.data;
                let token = localStorage.getItem("token");
                if (token) this.showw_activity_info.url += `?token=${token}`;
            }
        },
        go_showw_activity() {
            window.open(this.showw_activity_info.url, "_blank");
        },

        changeBankType(v) {
            console.log(v, this.bank_type_id);
            this.page = 1;
            this.bank_list();
        },

        async time_list() {
            const res = await time_list({});
            if (res.code == 1) {
                this.dialogVisible = true;
                this.timeList = res.data;
                if (this.userInfo.bank_data)
                    this.checkList = this.userInfo.bank_data.time_id.split(",");
            }
        },

        async bank_list() {
            const res = await bank_list({
                // pagesize: 6,
                page: this.page,
                province: this.address[0],
                city: this.address[1],
                area: this.address[2],
                type: this.bank_type_id,
            });
            if (res.code == 1) {
                this.bankList = res.data.map((items) => {
                    items.star = Number(items.star);

                    items.times = items.time
                        .map((item) => {
                            return item.name;
                        })
                        .join("、");
                    return items;
                });

                this.$nextTick(() => {
                    goTopSmooth();
                });
                if (res.data.length > 0) this.allcount = res.data[0].allcount;
                else this.allcount = 0;
            }
        },

        async edit_time() {
            const res = await edit_time({
                time_id: this.checkList.join(","),
            });
            if (res.code == 1) {
                this.dialogVisible = false;
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getUserInfo();
            }
        },

        changeEvaluatePage(page) {
            this.evaluatePage = page;
            this.lookEvaluate(this.bankSelectInfo);
        },
        async lookEvaluate(item) {
            const res = await get_evaluate_list({
                bank_id: item.id,
                page: this.evaluatePage,
                pagesize: 10,
            });
            if (res.code == 1) {
                this.bankSelectInfo = item;
                this.evaluateShow = true;
                this.evaluateList = res.data;
                if (this.evaluateList.length > 0) {
                    this.evaluateCount = this.evaluateList[0].all_count;
                    for (item of this.evaluateList) {
                        item.bank_content = item.bank_content.replace(
                            /\n/g,
                            "<br>"
                        );
                    }
                } else this.evaluateCount == 0;
            }
        },

        cityChange(citys) {
            if (citys.length == 0) return;

            let label1 = "";
            let label2 = "";
            let label3 = "";
            // this.bankList = [];
            // this.ruleForm.bank_id = "";
            for (let items of this.city_region) {
                if (items.name == citys[0]) {
                    label1 = items;
                    break;
                }
            }
            for (let item of label1.cities) {
                if (item.name == citys[1]) {
                    label2 = item;
                    break;
                }
            }
            for (let item of label2.cities) {
                if (item.name == citys[2]) {
                    label3 = item;
                    break;
                }
            }
            console.log(label1, label2, label3);
            console.log(this.address);
            this.selectAddress = label1.name + label2.name + label3.name;
            this.page = 1;
            this.bank_list();
        },

        changePage(page) {
            this.page = page;
            this.bank_list();
        },

        goMyOpen() {
            this.$router.push({
                path: "/openaccount/myopen",
            });
        },

        goForm(url = "") {
            this.$router.push({
                path: "/openaccount/form" + url,
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.mbox {
    background-color: #ffffff;
    padding: 16px 0;
    position: relative;
}

.bj {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 590px;

    img {
        width: 100%;
        height: 100%;
        // object-fit: cover;
    }

    // background: linear-gradient(
    //     180deg,
    //     rgba(155, 210, 255, 0.9) 0%,
    //     rgba(201, 231, 255, 0) 100%
    // );
}

.main {
    width: 1200px;
    padding-top: 54px;
    padding-bottom: 30px;
    margin: 0 auto;
    // background: linear-gradient(180deg, #c9e7ff 0%, #f9f9f9 20%);
    position: relative;
    min-height: 800px;

    .index-title-bj {
        // position: absolute;
        // top: 20px;
        // left: calc(50% + 100px);
        // width: 139px;
        // height: auto;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        position: relative;
        text-align: center;

        div {
            margin-top: 17px;
            font-weight: 400;
            font-size: 23px;
            color: #ffffff;
        }

        .img1 {
            width: auto;
            height: 147px;
            position: relative;
            top: -10px;
        }

        // .img2 {
        //     width: auto;
        //     height: 222px;
        //     margin-left: 88px;
        // }
    }
}

.list-title {
    text-align: center;
    font-weight: 500;
    font-size: 32px;
    color: #3d3d3d;
    display: flex;
    align-items: center;

    img {
        width: auto;
        height: 30px;
        margin-right: 12px;
    }

    .text1 {
        font-weight: 500;
        font-size: 32px;
        color: #333333;
    }

    .cateTab-type-item {
        font-weight: 500;
        font-size: 24px;
        color: #1c87f3;
        margin: 0 18px;
        cursor: pointer;
    }
}

.caozuolist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    margin: 30px auto;

    .list-name {
        font-weight: 500;
        font-size: 24px;
        color: #333333;
    }

    .button {
        width: 145px;
        height: 45px;
        background: #ffc33e;
        border-radius: 30px;
        line-height: 45px;
        text-align: center;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
    }
}

.button {
    user-select: none;
    cursor: pointer;

    &:hover {
        opacity: 0.9;
    }

    &:active {
        opacity: 0.8;
    }
}

.account-list {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
}

.fixd-yuyue {
    width: 60px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.05);
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    text-align: center;
    padding-top: 6px;
    position: fixed;
    bottom: 431px;
    right: calc(50% - 670px);

    .ns {
        display: block;
    }

    .s {
        display: none;
    }

    &:hover {
        .ns {
            display: none !important;
        }

        .s {
            display: block !important;
        }
    }

    img {
        margin: 0 auto;
        width: 25px;
        height: 25px;
        display: block;
        padding-bottom: 6px;
    }
}

.fixd-yuyue2 {
    width: 60px;
    height: auto;
    position: fixed;
    bottom: 260px;
    right: calc(50% - 670px);
    cursor: pointer;

    .img {
        width: 60px;
        height: auto;
    }

    div {
        position: relative;
        bottom: 53px;
        text-align: center;
        height: 0;
        color: #f23f55;
        font-weight: 700;
        font-size: 24px;

        .s1 {
            font-size: 12px;
            font-weight: 400;
        }

        .s2 {
            font-size: 18px;
        }
    }
}

.account-item {
    width: 580px;
    height: 317px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(28, 135, 243, 0.36);
    padding: 30px 30px;
    position: relative;
    margin-bottom: 40px;

    .actount-name {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 24px;
        color: #3d3d3d;
        padding-bottom: 15px;

        img {
            margin-right: 6px;
            width: 36px;
            height: 36px;
            border-radius: 36px;
            object-fit: cover;
        }
    }

    .feature {
        display: flex;
        justify-items: center;
        flex-wrap: wrap;

        .feature-item {
            height: 18px;
            padding: 0 12px;
            border-radius: 14px;
            background: rgba(108, 180, 33, 0.08);
            margin-right: 15px;
            font-weight: 400;
            font-size: 12px;
            color: #6cb421;
            line-height: 18px;
            margin-bottom: 10px;
        }
    }

    .actount-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .text-style {
        font-weight: 400;
        font-size: 18px;
        color: #555555;
        padding-bottom: 10px;
        line-height: 30px;

        span {
            // font-weight: 600;
        }
    }

    .ellipsis {
        white-space: nowrap;
        /* 禁止换行 */
        overflow: hidden;
        /* 隐藏溢出内容 */
        text-overflow: ellipsis;
    }

    .blue {
        color: #1b8dff;
        cursor: pointer;
    }

    .rate {
        display: flex;
        align-items: center;
    }

    .button {
        width: 101px;
        height: 41px;
        line-height: 41px;
        background: #1c87f3;
        border-radius: 10px;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        position: absolute;
        bottom: 15px;
        right: 30px;
    }
}

.pagination {
    text-align: center;
}

::v-deep .el-checkbox-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

::v-deep .el-checkbox {
    margin-left: 0 !important;
    margin-right: 0;
    width: 132px;
    height: 45px;
    display: block;
    margin-bottom: 21px;
}

.select-time {
    .st-title {
        font-weight: 700;
        font-size: 24px;
        color: #333333;
        padding-bottom: 34px;
    }

    .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;

        div {
            width: 124px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 10px;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            margin: 0 18px;
        }

        .b1 {
            background: #1c87f3;
        }

        .b2 {
            background: #ff8c2e;
        }
    }
}

.evaluate-dialog {
    padding: 10px 0 20px;

    .name-star {
        margin: 0 auto;
        position: relative;
        height: 58px;
        padding-left: 23px;
        width: 492px;
        display: flex;
        align-items: center;

        .star {
            position: relative;
            z-index: 10;
            font-weight: 500;
            font-size: 36px;
            color: #ffffff;

            span {
                font-size: 18px;
            }
        }

        .name {
            position: relative;
            z-index: 10;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
            padding-left: 16px;
        }

        .bj {
            position: absolute;
            z-index: 5;
            left: 0;
            top: 0;
            height: 58px;
            width: 100%;
        }
    }

    .list-name {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        line-height: 50px;
        height: 50px;
        border-bottom: 1px solid #929292;
        margin-left: 25px;
        margin-right: 25px;
    }
}

.evaluateList {
    padding-left: 25px;
    padding-right: 25px;
    height: 400px;
    overflow-y: auto;
}

.evaluateItem {
    padding: 15px 0;
    display: flex;
    border-bottom: 1px solid #dfdfdf;

    .avatar {
        width: 45px;
        min-width: 45px;
        height: 45px;
        border-radius: 45px;
        overflow: hidden;
        margin-right: 10px;
    }

    .right {
        width: 100%;

        .nameAndStar {
            display: flex;
            justify-content: space-between;
        }

        .text {
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 27px;
            padding: 14px 0 12px;
            white-space: pre-line;
        }

        .time {
            font-weight: 400;
            font-size: 16px;
            color: #333333;
        }
    }
}

::v-deep el-dialog__body {
    padding-top: 10px;
}
</style>